import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect} from 'mirrorx';
import { Button, Flex, List, WhiteSpace } from 'antd-mobile';
const Item = List.Item;

class App extends React.Component { 
	constructor(props) {
		super(props);
        this.state = {
            data: {}
        }
	}

	componentDidMount(){
        // 我的服务详情
        this.requestDetails();
        
        // T.loginAction(()=>{
        //     this.requestDetails();
        // });
    }
   
    handleUse = () => {
        const {data} = this.state;
        if(data.numbers == 0)return;
        T.fetch({
            url:'/facilitator/service/createCustConsumptionLog.json',
            data: {
                orderNo: data.orderNo,
                numbers: data.numbers
            },
            // loading:true
        }).then((res)=>{
            if(res.success){
                actions.routing.push({
                    pathname: 'qrcode',
                    search: `?orderNo=${res.value.orderNo}&recordsKey=${res.value.recordsKey}&serviceName=${data.serviceName}`
                })
            }
        })
    }

    handleCreateQrcode = () => {
        const {data,custId, policyId} = this.state;
        actions.routing.push({
            pathname: 'create-qrcode',
            search: `?serviceNo=${data.orderNo}&policyId=${policyId}&customerId=${custId}&serviceCode=${T.urlQuery('serviceCode')}`
        })
    }

    useAction = ()=>{
        let serviceCode = T.urlQuery('serviceCode')
        if( serviceCode=="999"){
            this.handleCreateQrcode();
        }else{
            this.handleUse();
        }
    }

	handleBack = () => {
        actions.routing.go(-1);
    }

    requestDetails = () => {
        T.fetch({
            url:'/facilitator/service/custServiceDetail.json',
            data: {
                serviceCode: T.urlQuery('serviceCode'),
                orderNo: T.urlQuery('orderNo'),
            },
            loading:true
        }).then((res)=>{
            if(res.success){
                let data = res.value || {};
				this.setState({data: data.facilitatorService||{},custId:data.custId,policyId:data.policyId})
            }
        })
    }

    tranformDate = (dateStr) => {
        if(!dateStr)return '';
        return dateStr.split(' ')[0].split('-').join('.');
    }

	render() {
        const {data} = this.state;
        const Lang = window.LangMessage ||{};
		return (
            <div className="service-details">
                <div className="details-content">
                    <h1 className="tac f44 lh15 strong">{data.serviceName}</h1>
                    <Flex className="bor-bot f32 fc0 pl30  strong pb20" style={{paddingTop: '15px'}}>
                        <Flex.Item>
                            {Lang.policy_info || '保单信息'}
                        </Flex.Item>
                    </Flex>
                    <List className="my-list">
                        <Item extra={data.companyName}>{Lang.insurance_company || '保险公司'}</Item>
                        <Item wrap extra={data.policyNo}>{Lang.policy_number || '保单号'}</Item>
                        <Item extra={data.goodsName}>{Lang.goods_name || '商品名称'}</Item>
                    </List>
                    <Flex className="bor-bot f32 fc0 pl30  strong pb20" style={{paddingTop: '15px'}}>
                        <Flex.Item>
                            {Lang.service_content || '服务内容'}
                        </Flex.Item>
                    </Flex>
                    <List className="my-list">
                        <Item extra={data.serviceName}>{Lang.service_project || '服务项目'}</Item>
                        <Item extra={data.numbers}>{Lang.remainder || '剩余次数'}</Item>
                        <Item wrap extra={`${this.tranformDate(data.startTime)} - ${this.tranformDate(data.expireTime)}`}>{Lang.expiration_date || '有效期限'}</Item>
                    </List>
                    <Flex className="bor-bot f32 fc0 pl30  strong pb20" style={{paddingTop: '15px'}}>
                        <Flex.Item>
                            {Lang.merchant_info || '商户信息'}
                        </Flex.Item>
                    </Flex>
                    <List className="my-list">
                        <Item extra={data.commerceName}>{Lang.merchant_name || '商户名称'}</Item>
                        <Item wrap extra={data.commerAddress}>{Lang.merchant_address || '商户地址'}</Item>
                        <Item extra={data.commerTel}>{Lang.merchant_phone || '商户电话'}</Item>
                    </List>
                </div>
                <ul className="service-details-content">
                    {/* <li>
                        <h2>{Lang.policy_info || '保单信息'}</h2>
                        <div className="flex">
                            <div>{`${Lang.insurance_company || '保险公司'}：`}</div>
                            <div>{data.companyName}</div>
                        </div>
                        <div className="flex">
                            <div>{`${Lang.policy_number || '保单号'}：`}</div>
                            <div>{data.policyNo}</div>
                        </div>
                        <div className="flex">
                            <div>{`${Lang.goods_name || '商品名称'}：`}</div>
                            <div>{data.goodsName}</div>
                        </div>
                    </li> */}
                    {/* <li>
                        <h2>{Lang.service_content || '服务内容'}</h2>
                        <div className="flex">
                            <div>{`${Lang.service_project || '服务项目'}：`}</div>
                            <div>{data.serviceName}</div>
                        </div>
                        <div className="flex">
                            <div>{`${Lang.remainder || '剩余次数'}：`}</div>
                            <div>{data.numbers}次</div>
                        </div>
                        <div className="flex">
                            <div>{`${Lang.expiration_date || '有效期限'}：`}</div>
                            <div>{`${this.tranformDate(data.startTime)} - ${this.tranformDate(data.expireTime)}`}</div>
                        </div>
                    </li> */}
                    {/* <li>
                        <h2>{Lang.merchant_info || '商户信息'}</h2>
                        <div className="flex">
                            <div>{`${Lang.merchant_name || '商户名称'}：`}</div>
                            <div>{data.commerceName}</div>
                        </div>
                        <div className="flex">
                            <div>{`${Lang.merchant_address || '商户地址'}：`}</div>
                            <div>{data.commerAddress}</div>
                        </div>
                        <div className="flex">
                            <div>{`${Lang.merchant_phone || '商户电话'}：`}</div>
                            <div>{data.commerTel}</div>
                        </div>
                    </li> */}
                </ul>
                {/* <div className="tac mt30">
                    <Button disabled={data.numbers==0?true:false} style={{"marginRight":"80px"}} inline size="large" type="primary" onClick={this.handleUse}>{Lang.use || '使用'}</Button>
                    <Button inline size="large" type="primary" onClick={this.handleBack}>{Lang.return || '返回'}</Button>
                </div> */}
                <Flex className="foot">
                    <Flex.Item>
                        <Button disabled={data.numbers==0?true:false} type="primary" onClick={this.useAction}>{Lang.use || '使用'}</Button>
                    </Flex.Item>
                    <Flex.Item>
                        <Button type="primary" onClick={this.handleBack}>{Lang.return || '返回'}</Button>
                    </Flex.Item>
                </Flex>
            </div>
        )
	}
}

export default App;